<template>
    <div>
        <global-tables
            @handleAllSelect="handleAllSelect"
            @changePage="handleChangePage"
            :list="list"
            :total="total"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button v-if="isAddBtn" class="features-btn" @click="handleBtnClick(null,'add')">
                                <Icon type="md-add" size="18" />新建
                            </Button>
                            <Button v-if="isDelete" class="features-btn btn-auto-m" @click="handleBtnClick(null,'delete')">
                                <Icon type="md-trash" size="17" />删除
                            </Button>
                            <Button v-if="isUpperUnder" class="features-btn btn-auto-m" @click="handleBtnClick(null,'upper')">
                                <Icon type="ios-unlock-outline" size="17" />上架
                            </Button>
                            <Button v-if="isUpperUnder" class="features-btn btn-auto-m" @click="handleBtnClick(null,'under')">
                                <Icon type="ios-lock-outline" size="17" />下架
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <Select v-model="search.Method" style="width:70px;margin:0 10px;" placeholder="Method">
                                <Option value="-1">全部</Option>
                                <Option value="0">其他</Option>
                                <Option value="1">口服</Option>
                                <Option value="2">外用</Option>
                                <Option value="3">注射针剂</Option>
                                <Option value="4">注射液体</Option>
                            </Select>
                        </div>
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入商品名称" />
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
    </div>
</template>

<script>
/**
 *  商品列表
 */
import { cyclicRouting } from '@/util';
import { getModulePermission } from '@/api/user';
import Api from './service';
import GlobalTables from '@/components/GlobalTables';

/**
 * list 表格数据
 *  total 总条数
 *  itemId 对话框id 新建为0 编辑为当前的id 详情看配置
 *  total 总条数
 *  loading 表格加载loading
 *  isDelete 删除按钮显示
 *  isAddBtn 新建按钮显示
 *  isUpperUnder 上架下架按钮显示
 *  isModal 对话框显示隐藏
 *  allSelectArr 多选数据
 *  search 模糊查询
 *  ruleValidate 表单校验
 */

export default {
    name: 'ProductsList',
    components: {
        GlobalTables
    },
    data() {
        return {
            list: [],
            total: 0,
            itemId: 0,
            loading: true,
            isDelete: false,
            isAddBtn: false,
            isUpperUnder: false,
            isModal: false,
            allSelectArr: null,
            ModalTitle: '新建商品',
            search: {
                keyword: '',
                type: '',
                Method: '-1',
                pageindex: 1,
                pagesize: 10
            },
            /* 表头 */
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                // {
                //     title: "商品图片",
                //     width: 100,
                //     render: (h, params) => {
                //         const { PictureSmall } = params.row;
                //         return h("div", [
                //             h("Avatar", {
                //                 props: {
                //                     src: PictureSmall,
                //                     shape: "square",
                //                     size: "large"
                //                 },
                //                 style: {
                //                     margin: "5px 0"
                //                 }
                //             })
                //         ]);
                //     }
                // },
                {
                    title: '商品名称',
                    key: 'ProName',
                    width: 200
                },
                {
                    title: '条形码',
                    width: 150,
                    render: (h, params) => {
                        const { SKU } = params.row;
                        const data = {
                            SKU: SKU ? SKU : ''
                        };
                        return h('div', [
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                data.SKU
                            )
                        ]);
                    }
                },
                {
                    title: '货号',
                    width: 100,
                    render: (h, params) => {
                        const { SupCode } = params.row;
                        const data = {
                            SupCode: SupCode ? SupCode : ''
                        };
                        return h('div', [h('p', {}, data.SupCode)]);
                    }
                },
                {
                    title: '商品类别',
                    render: (h, params) => {
                        const { TypeOneName, TypeTwoName, TypeThreeName } = params.row;
                        let name = '';
                        if (TypeThreeName !== '') {
                            name = TypeThreeName;
                        } else if (TypeTwoName != '') {
                            name = TypeTwoName;
                        } else if (TypeOneName != '') {
                            name = TypeOneName;
                        }
                        return h('div', [
                            h(
                                'p',
                                {
                                    style: {
                                        margin: '5px 0'
                                    }
                                },
                                name
                            )
                        ]);
                    }
                },
                {
                    title: '用法',
                    key: 'Method',
                    width: 100
                },
                {
                    title: '单次剂量',
                    key: 'Unit',
                    width: 100
                },
                {
                    title: '用药频率',
                    key: 'Dose',
                    width: 100
                },
                {
                    title: '销售单位',
                    key: 'Unit',
                    width: 100
                },
                {
                    title: '规格',
                    width: 70,
                    key: 'ProName',
                    render: (h, params) => {
                        const { SpecCount } = params.row;
                        if (SpecCount > 0) {
                            return h('div', [h('span', {}, '有')]);
                        } else {
                            return h('div', [h('span', {}, '无')]);
                        }
                    }
                },
                {
                    title: '操作',
                    width: '130px',
                    align: 'center',
                    render: (h, params) => {
                        const { isEdit, isNorm } = this;
                        return h('div', [
                            isEdit &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            background: '#5ab1ef',
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'edit');
                                            }
                                        }
                                    },
                                    '修改'
                                ),
                            isNorm &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            background: 'rgb(252, 134, 117)',
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'norm');
                                            }
                                        }
                                    },
                                    '规格'
                                )
                        ]);
                    }
                }
            ]
        };
    },
    methods: {
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            Api.getTablesList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            if (type == 'edit' || type == 'add') {
                this.itemId = 0;
                if (type == 'edit') {
                    this.itemId = item.ID;
                }
                this.$router.push({
                    path: `/productList-jump/${this.itemId}`
                });
            } else if (type === 'norm') {
                this.$router.push({
                    path: `/productList-norm/${item.ID}/${item.SKU}`
                });
                sessionStorage.ProName = item.ProName;
            } else if (type === 'upper' || type === 'under') {
                let title = '';
                if (type == 'upper') {
                    title = '上架';
                } else {
                    title = '下架';
                }
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要${title}吗`,
                        onOk: () => {
                            Api.UpperAndLowerShelves({
                                ids: this.allSelectArr,
                                operation: type == 'upper' ? true : false
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message);
                                    this.allSelectArr = '';
                                } else {
                                    this.$Message.error(res.message);
                                }
                                this.getTablesListData();
                            });
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功');
                        }
                    });
                } else {
                    this.$Message.error('请先选择需要操作的记录');
                }
            } else if (type === 'delete') {
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要删除吗`,
                        onOk: () => {
                            Api.deleteItem({
                                ids: this.allSelectArr
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message);
                                    this.allSelectArr = '';
                                } else {
                                    this.$Message.error(res.message);
                                }
                                this.getTablesListData();
                            });
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功');
                        }
                    });
                } else {
                    this.$Message.error('请先选择需要操作的记录');
                }
            }
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
        },
        /* 模糊搜索商品类别 */
        setSearchtype(e) {
            this.search.type = e[e.length - 1];
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
            /* 按钮权限请求 */
            getModulePermission({
                roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                moduleid: id
            }).then(res => {
                /* 按钮权限赋值 */
                for (let item in res.data) {
                    if (res.data[item].name == 'add') {
                        this.isAddBtn = true;
                    } else if (res.data[item].name == 'delete') {
                        this.isDelete = true;
                    } else if (res.data[item].name == 'edit') {
                        this.isEdit = true;
                    } else if (res.data[item].name == 'upperUnder') {
                        this.isUpperUnder = true;
                    } else if (res.data[item].name == 'norm') {
                        this.isNorm = true;
                    }
                }
                /* 列表请求 */
                this.getTablesListData();
            });
        });
    }
};
</script>

<style>
</style>
